<template>
    <div class="user-data">
        <div class="sizer" ref="sizer">
            <div class="item">
                <el-select v-model="area_id" placeholder="选择区" @change="getStreet" clearable filterable>
                    <el-option
                    v-for="item in areaData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="item">
                <el-select v-model="street_id" placeholder="选择镇/街道" @change="getSchool" clearable filterable>
                    <el-option
                    v-for="item in streetData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="item">
                <el-select v-model="school_id" placeholder="选择学校" clearable filterable>
                    <el-option
                    v-for="item in schoolData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="item">
                <el-date-picker
                    v-model="data_value"
                    type="daterange"
                    start-placeholder="起始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    :default-time="['00:00:00', '23:59:59']">
                </el-date-picker>
            </div>
            <div class="item"><el-button type="primary" @click="screen">筛选</el-button></div>
            <div class="item"><el-button type="primary" @click="reset">重置</el-button></div>
        </div>
        <main>
            <div class="research-count"> 
                <div class="research-count-l">
                    <div class="col">
                        <div class="item">
                            <div class="title">总数</div>
                            <div class="inner">
                                <div class="inner-l"><span class="num">{{countData.total_num}}</span></div>
                                <div class="inner-r"><i class="fs12"></i></div>  
                            </div> 
                        </div>
                        <div class="count-child">
                            <div class="count-child-item">
                                <div class="title">教研活动</div>
                                <div class="num">{{countData.eva_num}}</div>
                            </div>
                            <div class="count-child-item">
                                <div class="title">学科圈组</div>
                                <div class="num">{{countData.group_num}}</div>
                            </div>
                            <div class="count-child-item">
                                <div class="title">教案</div>
                                <div class="num">{{countData.prepare_num}}</div>
                            </div>
                            <div class="count-child-item">
                                <div class="title">布置作业</div>
                                <div class="num">{{countData.task_num}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="research-count-r common_main_inner">
                    <div>
                        <div class="title-box">
                            <p class="head-title">教研活动发起数</p>
                        </div>
                        <div class="tabs">
                            <el-button type="primary" plain v-for="(tab,inx) in research_tabs" :key="inx" v-text="tab.text" :class="{'live' : tab.live}" @click="giveAdvice(inx)">近1天</el-button>
                        </div>
                        <div class="data">
                            <div :id="research_line" class="line"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="task-count">
                <div class="content-left common_main_inner">
                    <div>
                        <div class="title-box">
                            <p class="head-title">任务布置次数</p>
                        </div>
                        <div class="tabs">
                            <el-button type="primary" plain v-for="(tab, inx) in taskTabs" :key="inx" v-text="tab.text" :class="{'live' : tab.live}" @click="taskAdvice(inx)"></el-button>
                        </div>
                        <div class="data">
                            <div :id="taskLine" class="line"></div>
                        </div>
                    </div>
                </div>
                <div class="content-right common_main_inner">
                    <div class="title-box">
                        <p class="head-title">布置作业教师排行</p>
                    </div>
                    <div class="item" v-for="(item, index) in teacherData.data" :key="index">
                        <div class="name">
                            <span>{{item.user_name}}</span>
                            <span>{{item.add_num}}次</span>
                        </div>
                        <div class="pro">
                            <el-progress :color="colorData[index]" :stroke-width="15" :percentage="item.percent" :show-text="false"></el-progress>
                        </div>
                    </div>
                    <div class="tips">
                        <p>数据取自{{teacherData.update_time}}</p>
                    </div>
                </div>
            </div>
            <div class="research-top common_main_inner">
                <div class="title-box">
                    <p class="head-title">参与教研活动Top榜</p>
                </div>
                <ul class="list">
                    <li  v-for="(item, index) in researchTop" :key="index">
                        <div class="item">
                            <div class="name"><span>{{item.user_name.substring(item.user_name.length-1, item.user_name.length)}}</span>{{item.user_name}}</div>
                            <div class="time">上传数：{{item.join_num}}</div>
                        </div>
                    </li>
                </ul>
            </div>
        </main>
    </div>
</template>
<script>
/**
 * 获取当前时间戳
 */
const now = Date.now || function() {
    return new Date().getTime();
}

export default {
    data() {
        return {
            colorData: ['#D78E3F', '#40B4EE', '#BDBE44', '#EE40AC', '#42DD8B'],
            // 筛选
            area_id: null,
            areaData: [],
            street_id: null,
            streetData: [],
            school_id: null,
            schoolData: [],
            data_value: '',
            // 总数
            countData: [],
            //教研活动发起数
            research_text: [],
            research_time: [],
            research_date: new Date().getTime(),
            researchTotal: null,
            researchKey: null,
            researchPage: 1,
            researchData: [],
            research_line: 'research-count',
            research_tabs: [
                {
                    text: '近1天',
                    name: '0',
                    live: false
                },
                {
                    text: '近7天',
                    name: '6',
                    live: false
                },
                {
                    text: '近30天',
                    name: '29',
                    live: true
                }
            ],
            // 任务布置次数
            task_text: [],
            task_time: [],
            task_date: new Date().getTime(),
            taskTotal: null,
            taskKey: null,
            taskPage: 1,
            taskData: [],
            taskLine: 'task-count',
            taskTabs: [
                {
                    text: '近1天',
                    name: '0',
                    live: false
                },
                {
                    text: '近7天',
                    name: '6',
                    live: false
                },
                {
                    text: '近30天',
                    name: '29',
                    live: true
                }
            ],
            // 布置作业教师排行
            teacherData: [],
            // 参与top榜
            researchTop: [],
        }
    },
    mounted() {
        this.watchScroll();
        this.getArea();
        this.getCount();        
        this.getResearch();
        this.getTask();
        this.getTeach();
        this.getNewUser();
    },
    methods: {
        watchScroll() {
            let sizer = document.querySelector('.sizer');
            let scrollHeight = sizer.offsetTop;

            let throttled = this.throttle(() => { /*监听页面滚动事件，控制sizer显示/隐藏*/
                let curScrollTop = 0;
                if(document.documentElement&&document.documentElement.scrollTop){  
                    curScrollTop=document.documentElement.scrollTop;  
                }else if(document.body){  
                    curScrollTop=document.body.scrollTop;  
                }

                if(!sizer) {
                    document.removeEventListener('scroll',()=>{});
                }  
                if(curScrollTop >= scrollHeight) {
                    sizer.classList.add('pf');
                } else {
                    sizer.classList.remove('pf');
                }
            }, 600);

            document.addEventListener('scroll', throttled)
        },
        /**
         * 创建并返回一个像节流阀一样的函数
         * @param {Funtion} func 传入的函数
         * @param {Number} wait 时间间隔 
         * @param {leading: false || trailing: false} options 
         */
        throttle(func, wait, options) {
            let context, args, result;
            let timeout = null;
            let previous = 0;
            if (!options) options = {};
            const later = function() {
            previous = options.leading === false ? 0 : now();
            timeout = null;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
            };
            return function() {
            if (!previous && options.leading === false) previous = now();
            let remaining = wait - (now - previous);
            context = this;
            args = arguments;
            if (remaining <= 0 || remaining > wait) {
                if (timeout) {
                clearTimeout(timeout);
                timeout = null;
                }
                previous = now;
                result = func.apply(context, args);
                if (!timeout) context = args = null;
            } else if (!timeout && options.trailing !== false) {
                timeout = setTimeout(later, remaining);
            }
            return result;
            };
        },
        getSchoolId() { // 获取选中学校的id或全部学校
            let school_data = [];

            if (this.school_id) {
                school_data.push(this.school_id);
            } else {
                if (this.street_id || this.area_id) {
                    this.schoolData.forEach( item => {
                        school_data.push(item.id)
                    });
                } else {
                    school_data = null;
                }
            }

            return school_data;
        },
        // 初始化
        getArea() {
            /*获取地区 */
            const success = res => {
                this.areaData = res.data.children;
            };
            this.$ajax.get("api/level/get_tree", { params: {}, func: { success: success } });
        },
        getStreet(val) {
            this.streetData = [];
            this.street_id = null;

            this.areaData.forEach(item => {
                if (item.id === val) {
                    this.streetData = item.children;
                }
            })

            this.getSchool(val);
        },
        getSchool(val) {
            this.school_id = null;
            this.schoolData = [];

            if (!val) {
                val = this.area_id;
            }

            let params = {
                id: val
            };
            const success = res => {
                this.schoolData = res.data;
            };
            this.$ajax.get("api/level/get_school_by_postionid", {
                params: params,
                func: { success: success }
            });
        },
        // 筛选
        screen() {
            this.getCount();
            this.giveAdvice(-1, 'screen');
            this.taskAdvice(-1, 'screen');
            this.getTeach();
            this.getNewUser();
        },
        reset() {
            this.area_id = null;
            this.street_id = null,
            this.streetData = [];
            this.school_id = null;
            this.schoolData = [];
            this.data_value = '';

            this.getCount();
            this.giveAdvice(2);
            this.taskAdvice(2);
            this.getTeach();
            this.getNewUser();
        },
        // 总数
        getCount() {
            let success = ( res => {
                this.countData = res.data;
            });
            let fail = (res => {
                this.$message.error(res.msg);
            })

            let params = {
                platform_id: this.getSchoolId(),
                start_time: this.data_value ? this.data_value[0] : null,
                end_time: this.data_value ? this.data_value[1] : null
            }
            this.$ajax.get('api/bigdata/research_countdata', {params: params, func: {success: success, fail: fail}})
        },
        // 获取日期
        getTodayDate(key) {
            //获取当前时间
            let date = null;
            if (key) {
                date = new Date(new Date() - 1000 * 60 * 60 * 24 * key);
            } else {
                date = new Date();
            }
            
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            if (month < 10) {
                month = "0" + month;
            }
            if (day < 10) {
                day = "0" + day;
            }
            let nowDate = year + "-" + month + "-" + day;
            return nowDate;
        },
        // 教研活动发起数
        getResearch(key) {
            let success = ( res => {
                this.researchKey = key ? key : '29';
                this.researchTotal = res.data.total_page;
                this.researchPage = 1;
                this.researchData = [{
                    page: 1,
                    data: res.data.data
                }];
                this.research_text = [];
                this.research_time = [];


                let tempData = res.data.data;
                for (let key in tempData) {
                    this.research_text.push(tempData[key].time_txt);
                    this.research_time.push(tempData[key].time_value);
                }

                this.researchInit();             
            });
            let fail = (res => {
                this.$message.error(res.msg);
            })

            let params = {
                start_time: this.data_value ? this.data_value[0] : this.getTodayDate(key ? key : '29'),
                end_time: this.data_value ? this.data_value[1] : this.getTodayDate(),
                page: 1,
                platform_id: this.getSchoolId(),
            }
            this.$ajax.get('api/bigdata/research_createdata', {params: params, func: {success: success, fail: fail}})
        },
        researchInit() {
            let _this = this;
            let myChart = this.$echarts.init(document.getElementById(this.research_line));

            myChart.setOption({
                tooltip: {
                    trigger: "axis",
                    formatter: "{b}: {c}"
                },
                grid: {
                    left: 60,
                    right: 60,
                    bottom: 100
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    axisLabel: {
                        interval: 0,
                        color: "#fff",
                        fontSize: "14",
                        rotate: 45
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#585E88"
                        }
                    },
                    data: _this.research_text
                },
                yAxis: {
                    type: "value",
                    axisLabel: {
                        fontSize: "14",
                        color: "#fff"
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#585E88"
                        }
                    }
                },
                dataZoom: [                    
                    {
                        type: 'slider',
                        show: true,
                        start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100
                        end: 50,
                        height: 10, // 组件高度
                        xAxisIndex: [0],
                        backgroundColor: '#314062', // 组件的背景颜色
                        borderColor: '#314062', // 组件边框颜色
                        showDataShadow: false, //是否显示数据阴影 默认auto
                        showDetail: false, //即拖拽时候是否显示详细数值信息 默认true           
                        filterMode: 'filter',
                        fillerColor: new _this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                            {
                                //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                                //给第一个设置0，第四个设置1，就是垂直渐变
                                offset: 0,
                                color: '#2F81E5'
                            }, 
                            {
                                offset: 1,
                                color: '#2F81E5'
                            }
                        ]),            
                        handleSize: 0, //滑动条的 左右2个滑动条的大小
                        handleColor: '#fff',//h滑动图标的颜色
                        handleStyle: {
                            borderColor: "#fff",
                            borderWidth: "1",
                            shadowBlur: 2,
                            background: "#fff",
                            shadowColor: "#fff",
                        },
                        handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                    },
                    {
                        type: 'inside',
                        show: true,
                        xAxisIndex: [0],
                        start: 1,
                        end: 100
                    }
                ],
                series: [
                    {
                        data: _this.research_time,
                        type: "line",
                        smooth: true,
                        itemStyle: {
                            borderColor: "#f7b20a",
                            color: "#f7b20a",
                            borderWidth: 0
                        },
                        lineStyle: {
                            color: "#f7b20a"
                        },
                        areaStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0.9,
                                x2: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#273757' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#FFB708' // 100% 处的颜色
                                    }
                                ],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    }
                ]
            });

            myChart.on("dataZoom", function(param){
                let opt = myChart.getOption().dataZoom[0];
                let start = opt.start;
                let end = opt.end;
                let flage = _this.researchTotal - _this.researchPage;
                let tiemFlag = new Date().getTime() - _this.research_date;

                if (end > 60 && flage > 0 && tiemFlag > 500) {
                    _this.research_date = new Date().getTime();

                    let success = ( res => {
                        _this.researchData.push({
                            page: res.data.current_page,
                            data: res.data.data
                        });

                        let tLen = _this.research_text.length;
                        _this.research_text = [];
                        _this.research_time = [];

                        _this.researchData.sort(function(a, b) {
                            return a.page - b.page;
                        })                        
                        _this.researchData.forEach( item => {
                            for (let key in item.data) {
                                _this.research_text.push(item.data[key].time_txt);
                                _this.research_time.push(item.data[key].time_value);
                            }
                        })

                        let sLen = start * tLen / _this.research_text.length;
                        let eLen = sLen + 100/ Math.floor(_this.research_text.length / 10);


                        myChart.setOption({
                            dataZoom: [                    
                                {  
                                    start : sLen,
                                    end : eLen,
                                },
                            ],
                            xAxis: {
                                data: _this.research_text
                            },
                            series: [
                                {
                                    data: _this.research_time
                                }
                            ]
                        })
                    });

                    let fail = (res => {
                        _this.$message.error(res.msg);
                    })
                    let params = {
                        start_time: _this.data_value ? _this.data_value[0] : _this.getTodayDate(_this.researchKey ? _this.researchKey : '29'),
                        end_time: _this.data_value ? _this.data_value[1] : _this.getTodayDate(),
                        page: _this.researchPage + 1,
                        platform_id: _this.getSchoolId(),
                    }

                    _this.$ajax.get('api/bigdata/research_createdata', {params: params, func: {success: success, fail: fail}})
                    _this.researchPage++;
                }
            });
        },
        giveAdvice(inx, key) {
            let flag = '29';
            if (!this.data_value && key == 'screen') {
                inx = 2;
            }

            this.research_tabs.forEach((e, i) => {
                e.live = false;

                if(inx === i && !this.data_value) {
                    e.live = true;
                    flag = e.name;
                }
            })

            this.getResearch(flag);
        },
        // 任务布置次数
        getTask(key) {
            let success = ( res => {
                this.taskKey = key ? key : '29';
                this.taskTotal = res.data.total_page;
                this.taskPage = 1;
                this.taskData = [
                    {
                        page: 1,
                        data: res.data.data
                    }
                ];
                this.task_text = [];
                this.task_time = [];

                let tempData = res.data.data;

                for (let key in tempData) {
                    this.task_text.push(tempData[key].time_txt);
                    this.task_time.push(tempData[key].time_value);
                }

                this.taskInit();
            });
            let fail = (res => {
                this.$message.error(res.msg);
            })

            let params = {
                start_time: this.data_value ? this.data_value[0] : this.getTodayDate(key ? key : '29'),
                end_time: this.data_value ? this.data_value[1] : this.getTodayDate(),
                page: 1,
                platform_id: this.getSchoolId(),
            }
            this.$ajax.get('api/bigdata/research_taskdata', {params: params, func: {success: success, fail: fail}})
        },
        taskInit() {
            let _this = this;
            let taskChart = this.$echarts.init(document.getElementById(_this.taskLine));

            taskChart.setOption({
                tooltip: {
                    trigger: "axis",
                    formatter: "{b}: {c}"
                },
                grid: {
                    left: 60,
                    right: 60,
                    bottom: 100
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    axisLabel: {
                        interval: 0,
                        color: "#fff",
                        fontSize: "14",
                        rotate: 45
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#585E88"
                        }
                    },
                    data: _this.task_text
                },
                yAxis: {
                    type: "value",
                    axisLabel: {
                        fontSize: "14",
                        color: "#fff"
                    },
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#585E88"
                        }
                    }
                },
                dataZoom: [                    
                    {
                        type: 'slider',
                        show: true,
                        start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100
                        end: 50,
                        height: 10, // 组件高度
                        xAxisIndex: [0],
                        backgroundColor: '#314062', // 组件的背景颜色
                        borderColor: '#314062', // 组件边框颜色
                        showDataShadow: false, //是否显示数据阴影 默认auto
                        showDetail: false, //即拖拽时候是否显示详细数值信息 默认true           
                        filterMode: 'filter',
                        fillerColor: new _this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                            {
                                //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                                //给第一个设置0，第四个设置1，就是垂直渐变
                                offset: 0,
                                // color: '#1eb5e5'
                                color: '#2F81E5'
                            }, 
                            {
                                offset: 1,
                                // color: '#5ccbb1'
                                color: '#2F81E5'
                            }
                        ]),            
                        handleSize: 0, //滑动条的 左右2个滑动条的大小
                        handleColor: '#fff',//h滑动图标的颜色
                        handleStyle: {
                            borderColor: "#fff",
                            borderWidth: "1",
                            shadowBlur: 2,
                            background: "#fff",
                            shadowColor: "#fff",
                        },
                        handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                    },
                    {
                        type: 'inside',
                        show: true,
                        xAxisIndex: [0],
                        start: 1,
                        end: 100
                    }
                ],
                series: [
                    {
                        data: _this.task_time,
                        type: "line",
                        smooth: true,
                        itemStyle: {
                            borderColor: "#f7b20a",
                            color: "#f7b20a",
                            borderWidth: 0
                        },
                        lineStyle: {
                            color: "#08DBFF"
                        },
                        areaStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0.9,
                                x2: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#273757' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#08DBFF' // 100% 处的颜色
                                    }
                                ],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    }
                ]
            });

            taskChart.on("dataZoom", function(param){
                let opt = taskChart.getOption().dataZoom[0];
                let start = opt.start;
                let end = opt.end;
                let flage = _this.taskTotal - _this.taskPage;
                let tiemFlag = new Date().getTime() - _this.task_date;

                if (end > 60 && flage > 0 && tiemFlag > 500) {
                    _this.task_date = new Date().getTime();

                    let success = ( res => {
                        _this.taskData.push({
                            page: res.data.current_page,
                            data: res.data.data
                        });

                        let tLen = _this.task_text.length;
                        _this.task_text = [];
                        _this.task_time = [];

                        _this.taskData.sort(function(a, b) {
                            return a.page - b.page;
                        })                        
                        _this.taskData.forEach( item => {
                            for (let key in item.data) {
                                _this.task_text.push(item.data[key].time_txt);
                                _this.task_time.push(item.data[key].time_value);
                            }
                        })                        

                        let sLen = start * tLen / _this.task_text.length;
                        let eLen = sLen + 100/ Math.floor(_this.task_text.length / 10);


                        taskChart.setOption({
                            dataZoom: [                    
                                {  
                                    start : sLen,
                                    end : eLen,
                                },
                            ],
                            xAxis: {
                                data: _this.task_text
                            },
                            series: [
                                {
                                    data: _this.task_time
                                }
                            ]
                        })
                    });

                    let fail = (res => {
                        _this.$message.error(res.msg);
                    })
                    let params = {
                        start_time: _this.data_value ? _this.data_value[0] : _this.getTodayDate(_this.taskKey ? _this.taskKey : '29'),
                        end_time: _this.data_value ? _this.data_value[1] : _this.getTodayDate(),
                        page: _this.taskPage + 1,
                        platform_id: _this.getSchoolId(),
                    }

                    _this.$ajax.get('api/bigdata/research_taskdata', {params: params, func: {success: success, fail: fail}})
                    _this.taskPage++;
                }
            });
        },
        taskAdvice(inx, key) {
            let flag = '29';
            if (!this.data_value && key == 'screen') {
                inx = 2;
            }

            this.taskTabs.forEach((e,i) => {
                e.live = false;
                if(inx === i && !this.data_value) {
                    e.live = true;
                    flag = e.name;
                }
            })

            this.getTask(flag);
        },
        // 布置作业教师排行
        getTeach() {
            let success = ( res => {
                this.teacherData = res.data;
            });
            let fail = (res => {
                this.$message.error(res.msg);
            })
            let params = {
                platform_id: this.getSchoolId(),
                start_time: this.data_value ? this.data_value[0] : null,
                end_time: this.data_value ? this.data_value[1] : null
            }

            this.$ajax.get('api/bigdata/research_teacherdata', {params: params, func: {success: success, fail: fail}})
        },
        // 参与top榜
        getNewUser() {
            let success = ( res => {
                this.researchTop = res.data;
            });
            let fail = (res => {
                this.$message.error(res.msg);
            })
            let params = {
                platform_id: this.getSchoolId(),
                start_time: this.data_value ? this.data_value[0] : null,
                end_time: this.data_value ? this.data_value[1] : null
            }

            this.$ajax.get('api/bigdata/research_joindata', {params: params, func: {success: success, fail: fail}})
        },
    }
}
</script>
<style lang="scss">
.user-data {
    main {
        .research-count {
            display: flex;

            .research-count-l {
                margin-right: 20px;

                .item {
                    background: #3D91D2;
                }

                .count-child {
                    .count-child-item {
                        background: #3D91D2;
                    }
                }

                .item {
                    width: 430px;
                    padding: 43px 20px;
                    background: #3D91D2;
                    border-radius: 6px;
                    color: #fff;
                    margin-bottom: 10px;
                    box-sizing: border-box;

                    .title {
                        margin-top: -23px;
                        margin-bottom: 13px;
                        font-size: 16px;                        
                    }

                    .inner {
                        display: flex;
                        margin-bottom: 30px;

                        .inner-l {
                            position: relative;
                            flex: 1;

                            .num {
                                position: absolute;
                                font-size: 40px;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                            }
                        }

                        .inner-r {
                            flex: 0 0 142px;
                            text-align: center;
                        }
                    }
                }

                .count-child {
                    position: relative;
                    width: 430px;

                    .count-child-item {
                        display: inline-block;
                        width: 210px;
                        height: 160px;
                        padding: 20px;
                        margin-right: 10px;
                        margin-bottom: 10px;
                        background: #3D91D2;
                        border-radius: 6px;
                        color: #fff;
                        box-sizing: border-box;

                        &:nth-of-type(2n) {
                            margin-right: 0;
                        }

                        &:nth-last-of-type(1),
                        &:nth-last-of-type(2) {
                            margin-bottom: 0;
                        }

                        .title {
                            font-size: 14px;
                        }

                        .num {
                            font-size: 36px;
                            text-align: center;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }

            .research-count-r {
                flex: 1;
                background-color: #283656;

                .tabs {
                    padding-right: 70px;
                    text-align: right;

                    button {
                        background: none;
                        border-color: #348efc;
                        color: #348efc;
                        margin: 0;
                        padding: 7px 25px;
                        border-radius: 0;
                        border-right: 0;

                        &:last-child {
                            border-right: 1px solid #348efc;
                        }
                    }
                        
                    .live {
                        background: #348efc;
                        color: #fff;
                    }
                }

                .data {
                    height: 495px;
                    margin: 0 20px 0 23px;

                    .line {
                        max-width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
}
</style>
